<template>
  <!--    <li @click="to_session('20220910')">aaa</li>-->
  <div>
    <el-button type="primary" class="btn_create_session" plain>新建会话</el-button>
  </div>
  <div>
    <el-button type="success" class="btn_create_session" @click="getSessionList" plain>刷新数据</el-button>
  </div>
  <el-table ref="tableRef" row-key="date" :data="tableData" style="width: 100%" v-loading="loading_session_list">
    <el-table-column prop="date" label="创建日期" sortable width="180" column-key="date"/>
    <el-table-column prop="name" label="名称" width="180">
      <template #default="scope">
        <el-link @click="to_session(scope.row.session_token)">{{ scope.row.name }}</el-link>
      </template>
    </el-table-column>
    <el-table-column prop="info" label="信息" :formatter="formatter"/>
    <el-table-column prop="tag" label="状态" width="100" :filters="[
        { text: '初始化', value: '初始化' },
        { text: '处理中', value: '处理中' },
        { text: '提测中', value: '提测中' },
        { text: '入库中', value: '入库中' },
        { text: '完成', value: '完成' },
        { text: '失败', value: '失败' },
      ]" :filter-method="filterTag" filter-placement="bottom-end">
      <template #default="scope">
        <el-tag :type="getTagStyle(scope.row.tag)" disable-transitions>{{ scope.row.tag }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="80">
      <template #default="scope">
        <el-button plain type="primary" size="small" @click.prevent="deleteSession(scope.row.session_token)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import axios from 'axios'

export default {
  name: "indexSessionList",
  methods: {
    to_session(session_id) {
      // window.open("/session_one?sessionToken=" + session_id, '_blank');
      window.location.search = "sessionToken=" + session_id
      // this.$router.push({
      //   path: '/',
      //   query: {
      //     sessionToken: session_id,
      //   }
      // })
    },
    formatter(row) {
      return row.info
    },
    filterTag(value, row) {
      return row.tag === value
    },
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    },
    getTagStyle(tagValue) {
      switch (tagValue) {
        case "初始化":
          return ""
        case "处理中":
          return "success"
        case "提测中":
          return "info"
        case "入库中":
          return "warning"
        case "完成":
          return "danger"
        case "失败":
          return "danger"
      }
    },
    getSessionList() {
      let obj_this = this
      obj_this.loading_session_list = true
      let data = {"user_token": ""}
      axios.post('/load_session_list', data).then(function (response) {
        obj_this.tableData = response.data.data
        obj_this.loading_session_list = false
      }).catch(function (error) { // 请求失败处理
        console.log(error);
      });
    },
    deleteSession(session_token) {
      let obj_this = this
      obj_this.loading_session_list = true
      let data = {"user_token": "", "session_token": session_token}
      axios.post('/session_delete', data).then(function () {
        obj_this.getSessionList()
      }).catch(function (error) { // 请求失败处理
        console.log(error);
      });
    }
  },
  data() {
    return {
      tableData: [],
      loading_session_list: false
    }
  },
  created() {
    for (let i = 1; i < 100000; i++) {
      clearInterval(i);
    }
    this.getSessionList()
  }
}
</script>

<style scoped>
.btn_create_session {
  position: relative;
  right: 0;
  width: 100%;
  height: 35px;
}
</style>